<!DOCTYPE html>
<html>

	<head>
		<base href="../"/>
		<meta charset="utf-8" />
		<title>快乐购 - 地址管理</title>

		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="css/default.min.css" />

		<!-- JS -->
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/address.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="my/myjs/address.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
	<!-- 导航条开始 -->
	<div id="head-div" >

	</div>
	<script>
		$("#head-div").load("head.html");
	</script>
	<!--头部结束-->
	<!-- //导航条结束 -->

		<!-- 页面主体部分 -->
		<section class="container mt-2">
			<!-- 收货地址列表部分 -->
			<div class="h3 border-bottom">
				<span>已保存的收货地址</span>
				<small id="addr-count" class="badge badge-secondary">0</small>
			</div>
			<table class="table table-sm table-striped">
				<thead class="thead-dark">
					<tr>
						<th>收货人</th>
						<th>联系电话</th>
						<th>详细地址</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">

				</tbody>
			</table>
			<!-- //收货地址列表部分结束 -->

			<!-- 新增收货地址表单部分 -->
			<div class="h3 mt-2 border-bottom">
				新增收货地址
			</div>
			<form id="form-add-address" >
				<div class="row">
					<div class="col-md-6">
						<div class="form-group form-row">
							<label for="t1" class="col-form-label">收货人名字</label>
							<input id="t1" name="contacts" type="text" class="col form-control" required="required" />
						</div>

						<div class="form-group form-row">
							<label for="t2" class="col-form-label">联系电话</label>
							<input id="t2" name="tel" type="tel" class="col form-control" required="required" />
						</div>
					</div>
				</div>

				<div class="form-group">
					<label for="t3">详细地址</label>
					<textarea id="t3" name="address" rows="4" class="form-control" required="required"></textarea>
				</div>

				<div class="form-group">
					<div class="d-flex justify-content-end">
						<button class="btn btn-outline-success" type="button" id="tj-btn">
							<i class="glyphicon-plus"></i>
							<span>新增收货地址</span>
						</button>
					</div>
				</div>
			</form>
			<!-- //新增收货地址表单部分结束 -->

		</section>
		<!-- //页面主体部分结束 -->

	<!-- 页面脚部部分 -->
	<div id="footer-div">

	</div>
	<script>
		$("#footer-div").load("footer.html");
	</script>
	<!-- //页面脚部部分结束 -->
	</body>

</html>
